<template>
  <div class="footer">
    <div class="black-layer" style="box-sizing: border-box; padding: 0 50px">
      <div class="footer-top">
        <el-row style="height: 100%">
          <el-col :span="18" class="footer-link">
            <div class="footer-link-wrapper">
              <p class="footer-link-title">热门类别：</p>
              <el-row class="footer-link-category">
                <el-col :span="3" v-for="i in 9" :key="i"
                  ><el-link style="margin: 10px 0" :underline="false"
                    >无下划线</el-link
                  ></el-col
                >
              </el-row>

              <p class="footer-link-title">友情链接：</p>
              <el-row class="footer-link-links">
                <el-col :span="3" v-for="i in 20" :key="i"
                  ><el-link style="margin: 10px 0" :underline="false"
                    >无下划线</el-link
                  ></el-col
                >
              </el-row>
            </div>
          </el-col>

          <el-col :span="6" class="footer-qrcode">
            <div class="footer-qrcode-main">
              <el-image
                style="width: 160px; height: 160px"
                :src="qrcodeUrl"
                fit="fill"
              ></el-image>
              <p class="footer-qrcode-main-text">扫码关注“王者简历”公众号</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="footer-copy">
        <el-row class="footer-copy-wrapper fcw-1" style="padding-top: 20px">
          <el-col :span="8" class="footer-copy-tl"
            ><div>
              <el-image
                style="width: 130px; height: 40px"
                :src="logoUrl"
                fit="fill"
              ></el-image></div
          ></el-col>

          <el-col :span="8" class="footer-copy-tc">
            <div style="text-align: center">
              <el-link :underline="false" style="padding: 0 12px"
                >关于我们</el-link
              >
              <el-link :underline="false" style="padding: 0 12px"
                >联系我们</el-link
              >
              <el-link :underline="false" style="padding: 0 12px"
                >VIP会员</el-link
              >
              <el-link :underline="false" style="padding: 0 12px"
                >服务条款</el-link
              >
              <el-link :underline="false" style="padding: 0 12px"
                >网站地图</el-link
              >
            </div>
          </el-col>

          <el-col :span="8" class="footer-copy-tr">
            <span>广州日来科技有限公司</span>
          </el-col>
        </el-row>

        <el-row class="footer-copy-wrapper fcw-2">
          <el-col :span="10" class="footer-copy-bl">
            王者简历网站所发布展示的“简历模板”版权归王者简历所有，
            任何商业用途均须联系作者。如未经授权用作他处，王者简历将保留追究侵权者法律责任的权利。
          </el-col>

          <el-col :span="4" class="footer-copy-bc"></el-col>

          <el-col :span="10" class="footer-copy-br">
            <p style="margin: 0">粤ICP备14072413号</p>
            <p style="margin: 0">
              Copyright © 2014-2021 kingcv.cn. All Rights Reserved.
            </p>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      logoUrl: require("@/assets/images/home/logo-header-light.png"),
      imgUrl: require("@/assets/images/home/banner.png"),
      qrcodeUrl: require("@/assets/images/home/qrcode.png"),
    });

    const handleSelect: any = (key: any, keyPath: any) => {
      console.log(key, keyPath);
    };

    return {
      ...toRefs(state),
      handleSelect,
    };
  },
});
</script>

<style lang="scss" scoped>
$opacity: 0 !default;

.text-overflow {
  display: block;
  width: 13em;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  display: none;
  opacity: $opacity;
}

.footer {
  background: url("../../assets/images/home/footer-bg.png") no-repeat;
  background-size: cover;
  height: 600px;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #868686;
  text-align: left;
  line-height: normal;

  .black-layer {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);

    .footer-top {
      height: 455px;

      .footer-link {
        .footer-link-title {
          font-family: "微软雅黑 Bold", "微软雅黑";
          font-weight: 700;
          font-size: 14px;
          color: #c9c9c9;
          margin: 60px 0 0 0;
        }
      }

      .footer-qrcode {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;

        .footer-qrcode-main {
          .footer-qrcode-main-text {
            color: #aeaeae;
            font-family: "Arial Normal", "Arial";
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            text-align: left;
            line-height: normal;
          }
        }
      }
    }

    .footer-copy {
      height: 145px;
      border-top: 1px solid #333333;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;

      .footer-copy-wrapper {
        flex-grow: 1;

        .footer-copy-tr {
          display: flex;
          flex-flow: column nowrap;
          justify-content: flex-end;
          align-items: flex-end;
        }

        .footer-copy-br {
          text-align: right;
        }
      }
    }
  }
}
</style>